<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link
	href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"
	rel="stylesheet">
<style type="text/css">
body, html {
	margin: 0px;
	width: 100%;
	height: 100%;
}

#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	/*margin-left:15%;*/
}

#flightList {
	width: 500px;
	height: 230px;
	background-color: rgba(0, 0, 0, 0.6);
}

.control-panel-table {
	width: 100%;
	margin-right: 0px;
	margin-left: 0px;
	color: #fff;
	font-size: 10px;
	border-collapse: collapse;
	border: none;
}

.control-panel-table th {
	height: 25px;
	font-size: 12px !important;
	font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑',
		'Arial', 'sans-serif';
	background-color: rgba(173, 200, 200, 0.4) !important;
	text-align: center;
	color: #fff;
}

.control-panel-table tr {
	font-size: 9px !important;
	text-align: center;
	height: 30px;
}

/*'Helvetica, Hiragino Sans GB, Microsoft Yahei, 微软雅黑, Arial, sans-serif'*/
.control-panel-row {
	background-color: rgba(51, 102, 255, 0.7);
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px !important;
	margin-right: 0px !important;
	border: none;
}

.flightInfoTitle {
	width: 250px;
	background-color: rgba(23, 102, 32, 0.7) !important;
}

#flightContent {
	height: 15s0px;
	background-color: rgba(255, 255, 255, 0.7) !important;
}

#flightContent font {
	font-size: 14px;
	font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑',
		'Arial', 'sans-serif';
	color: #000;
	height: 100px;
	padding-left: 15px;
	padding-right: 0px;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

.font-blue {
	font-size: 18px !important;
	color: #436EEE !important;
}

.flight-code {
	font-size: 16px !important;
}

.control-panel-row h4 {
	font-size: 16px;
	font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑',
		'Arial', 'sans-serif';
	color: #fff;
	height: 20px;
	padding-left: 15px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}

.bg-red1 {
	background-color: rgba(221, 75, 57, 0.6) !important;
}

.cityControlDiv {
	width: 180px;
}

.cityShowTitle {
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 16px;
	color: #fff;
	background-color: rgba(221, 75, 57, 0.6) !important;
}

.cityCheckBox {
	font-size: 14px;
	color: #fff;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: rgba(0, 0, 0, 0.6) !important;
}

#container {
	overflow: hidden;
	height: 200px;
}
</style>
<title>飞行航线实时监测系统Demo</title>
</head>

<body>
	<!--<div id="control"></div>-->
	<div id="allmap"></div>
	<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<!-- DataTables -->
	<script type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak=lADBuZEvRsd1cX8l6Q3T0fGu"></script>
	<script type="text/javascript"
		src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
	<script src="../../plugins/common/common-util.js"></script>
	<script type="text/javascript" src="../../map/map-0.1.js"></script>
	<script type="text/javascript" src="../../plugins/jsutil/MapUtil.js"></script>
	<script>
		//1.百度地图初始化
		var map = new BMap.Map("allmap", {
			mapType : BMAP_SATELLITE_MAP
		}); // 创建Map实例
		map.centerAndZoom(new BMap.Point(105.404, 35.515), 5); // 初始化地图,设置中心点坐标和地图级别
		//map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
		//map.addControl(new BMap.NavigationControl());
		map.enableScrollWheelZoom();
		//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的

		map.enableScrollWheelZoom(); //开启鼠标滚轮缩放

		var beijingPosition = new BMap.Point(116.432045, 39.910683);
		var taiwanPosition = new BMap.Point(121.491121, 25.127053);
		//map.centerAndZoom(beijingPosition);
		map.setCenter("兰州");

		var GL_AREA_MAP = new Map();//区域数据
		var GL_AREA_SYMBOL_MAP = new Map();//区域数据
		var GL_PLANE_MAP = new Map();//飞机航班信息数据
		var GL_PLANE_SYMBOL_MAP = new Map();//飞机MAP
		var GL_LINE_MAP = new Map();//航线轨迹
		var GL_LINE_SHOW_MAP = new Map();//航线轨迹展示记录
		var GL_GPS_LASTTIME_MAP = new Map();//航线GPS最后更新时间点
		var GL_GCTASK = null;//定时任务
		var GL_PLANE_LIST_IDX = 0;
		var GL_PLANE_MARQUE_IDX = 0;

		//var GL_PLANE_MAP = new Map();

		//注册checkbox时间

		//console.log(GL_AREA_MAP.get('北京'));

		//3.初始化自定义图层的表单控件 
		// 创建控件
		var flightCtrl = new FlightListControl();
		var flightInfoCtrl = new FlightInfoControl();
		var cityCtrl = new CityControl();
		// 添加到地图当中
		map.addControl(flightCtrl);
		map.addControl(flightInfoCtrl);
		map.addControl(cityCtrl);

		//2.加载有机场的城市数据，城市lable标签设置
		loadAreaData(map);
		$('#level1Citys').prop('checked', true);
		$('#level1Citys').click(function() {
			showCity($('#level1Citys'));
		});
		$('#level2Citys').click(function() {
			showCity($('#level2Citys'));
		});

		loadFlightListAjax();

		var speed = 5000;
		var container = $('#flights');
		var marPlaneListTask = setTimeout(marqueePlaneList, speed);
		container.on('mouseover', function() {
			clearTimeout(marPlaneListTask);
		});

		container.on('mouseout', function() {
			marPlaneListTask = setTimeout(marqueePlaneList, speed);
		});

		var clearSpeed = 5000;
		var GCTask = setTimeout(queryStatusTask, clearSpeed);

		window.onload = function() {
			var obj1 = document.getElementById('flightList');
			var obj2 = document.getElementById('flightInfo');
			var obj3 = document.getElementById('cityControl');
			rDrag.init(obj1);
			rDrag.init(obj2);
			rDrag.init(obj3);

		}
	</script>
</body>
</html>

